<template>
  <div :class="['navButton', {'plain': !!plain}]">
    <slot></slot>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  plain: {
    type: Boolean
  }
})

</script>

<style lang="scss" scoped>
.navButton {
  // width: 73px;
  padding: 0 8px;
  height: 25px;
  opacity: 1;
  border-radius: 7px;
  background: rgba(45, 160, 227, 1);
  font-size: 14px;
  color: rgba(255, 255, 255, 1);
  cursor: pointer;
  margin-right: 7px;
  display: inline-block;
  text-align: center;
  line-height: 25px;
  &:last-of-type{
    margin-right: 0;
  }
  &.plain{
    background: rgba(255, 255, 255, 0);
    border: 1px solid rgba(45, 160, 227, 1);
    color: rgba(45, 160, 227, 1);
    line-height: 23px;
  }
}
</style>
